<template>
    <div id="icons">
        <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) in pagess" :key="index">
                    <a href="#" class="icon" v-for="(ite, inde) in item" :key="inde">
                        <div class="icon-img">
                            <img class="icon-img-centent" :src="ite.image_hash">
                        </div>
                        <span class="icon-desc">
                            {{ite.name}}
                        </span>
                    </a>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        
        data (){
            return{
                iconlists:[],
                swiperOption: {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                loop: true,
      },
            }
        },
        methods: {
            axios() {
                axios.get('/api/icons.json').then(this.success).catch(this.errors)
            },
            success(data){
                this.iconlists=data.data[0].entries
                let gs = 'jpeg'
               this.iconlists.forEach((ems)=>{
                    let hash = ems.image_hash
                    let str = `${hash.slice(0,1)}/${hash.slice(1,3)}/${hash.slice(3)}`
                    ems.image_hash=`http://fuss10.elemecdn.com/${str}.${gs}?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/`
              })
            },
            errors(err){
             console.log(err)
            }
        },
        mounted() {
           this.axios()
        },
        computed:{
    pagess(){
      const pages =[];
      this.iconlists.forEach((item,index) => {
        const pag = Math.floor(index/10);
        if(!pages[pag]){
          pages[pag]=[]
        }
        pages[pag].push(item)
      });
      return pages
    }
  }
    }
</script>
<style lang="stylus" scoped>
@import '~styles/ellipsis.styl';
    #icons
      background-color #fff
      padding-top .1rem
      
      .icon
        position relative
        overflow hidden
        float left
        width 20%
        height 0
        padding-bottom 20%
        .icon-img
          position absolute
          top 0
          left 0
          right 0
          bottom .44rem
          box-sizing border-box
          .icon-img-centent
            display block
            margin 0 auto
            height 100%
        .icon-desc
          position absolute
          left 0
          right 0
          bottom 0
          height .44rem
          line-height .34rem
          text-align center
          color #000
          ellipsis()
</style>


